<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>猎舞网</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="description" content="">
		<link rel="stylesheet" href="__PUBLIC__static/lib/weui.min.css">
		<link rel="stylesheet" href="__PUBLIC__static/css/jquery-weui.css">
		<link rel="stylesheet" href="__PUBLIC__static/css/style.css">
		<style type="text/css">
			body {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100vh;
				background-image: url(__PUBLIC__static/images/bg.png);
				background-size: 100% 95%;
				background-position: 0px 96%;
				background-repeat: no-repeat;
			}
			
			.lg-title {
				position: relative;
				width: 100%;
				height: 56px;
				background-color: black;
			}
			
			.backw {
				position: absolute;
				width: 30px;
				top: 25%;
				left: 9px;
			}
			
			.lg-title span {
				font-family: FZLTZHK;
				font-size: 22px;
				color: #FFFFFF;
				line-height: 56px;
			}
			
			.img {
				position: absolute;
				width: 100%;
				text-align: center;
				top: 13%;
			}
			
			.liewuimg {
				width: 100px;
			}
			
			.login-form {
				position: absolute;
				width: 100%;
				margin: 50% auto;
			}
			
			.phone {
				width: 100%;
				border-bottom: 1px solid #E0E0E0;
				position: relative;
			}
			
			.phone p {
				float: left;
				color: #333333;
				margin-right: 20px;
				margin-top: 5px;
				font-family: simhei[Regular];
				font-size: 18px;
			}
			
			.phone input {
				margin-top: 5px;
				float: left;
				border: none;
				height: 32px;
				font-size: 14px;
			}
			
			.phone input:focus {
				outline: none;
			}
			
			.phone i {
				position: absolute;
				right: 15px;
				top: 5px;
			}
			
			#login {
				position: absolute;
				width: 95%;
				top: 150px;
				left: 10px;
              height:65px;
              background:url("__PUBLIC__static/images/denglv.png") no-repeat;
              background-size:100%;
              border:none;
			}
			
			#zhuce {
				position: absolute;
				width: 88%;
				top: 230px;
				left: 24px;
				height: 65px;
				background: url("__PUBLIC__static/images/zhuce1.png") no-repeat;
				background-size: 100%;
				border: none;
			}
			
			.forgets {
				position: absolute;
				top: 290px;
				left: -5px;
			}
			.forgets a {
				color: black;
			}
		</style>
	</head>

	<body ontouchstart>
		<!--主体-->
		<div class="login-box">
			<div class="lg-title">
				<img class="backw" src="__PUBLIC__static/images/backwhite.png" alt="" />
				<span>猎舞网</span>
			</div>
			<div class="img">
				<img class="liewuimg" src="__PUBLIC__static/images/logo.png" />
			</div>
			<div class="login-form">
				<form>
					<div class="login-user-name common-div">
						<div class='phone clear'>
							<p>手机号</p>
							<input id="phone" type="text" placeholder="">
							<i><img src="__PUBLIC__static/images/del.png"></i>
						</div>
					</div>
					<div class="login-user-pasw common-div">
						<div class='phone clear'>
							<p>密&nbsp;&nbsp;&nbsp;码</p><input id="pwd" type="password" placeholder="">
						</div>
					</div>
					<input id="login" type="button" />
					<input id="zhuce" type="button"/>
				</form>
				<div class="forgets">
					<a href="../Users/changepwd">忘记密码？</a>
				</div>
			</div>
		</div>
		<script src="__PUBLIC__static/lib/jquery-2.1.4.js"></script>
		<script src="__PUBLIC__static/lib/fastclick.js"></script>
		<script type="text/javascript" src="__PUBLIC__static/js/jquery.Spinner.js"></script>
		<script src="__PUBLIC__static/js/jquery-weui.js"></script>
		<script type="text/javascript">
			$(".backw").on("click", function() {
				window.location.href = "../Content/index";
			});
			$("#zhuce").on("click",function(){
				window.location.href = "usersreg";
			});
			$("#phone").on("focus",function(){
				$(this).siblings().fadeIn();
			});
			$("#phone").on("blur",function(){
				$(this).next().fadeOut();
			});
			$("#login").on("click", function() {
				//jq的ajax
				$.ajax({
					type: 'POST',
					url: "users",
					data: {
						mobile: $("#phone").val(),
						password: $("#pwd").val()
					},
					dateType: "json",
					success: function(xhr) {
						switch(xhr.status) {
							case 1:
								window.location.href = "../Content/index";
								break;
							case 0:
								alert(xhr.message);
								break;
							case -1:
								alert(xhr.message);
								break;
						}
					}
				})
			});
		</script>
	</body>
</html>